<template>
  <div class="btns">
    <button class="btn" @click="analyse">分析</button>
    <button class="btn" @click="clean">清除</button>
  </div>
</template>

<script setup>
  import { onBeforeUnmount, reactive } from 'vue';
  import useDraw, { DrawType } from '@/hooks/useDraw';
  import { ViewSight } from 'cgak';
  import { ElNotification } from 'element-plus';
  const state = reactive({
    tiped: false,
  });

  const analyser = new ViewSight(window.viewer, {});
  console.log(analyser);

  const { drawStart, drawStop, drawClear } = useDraw(window.viewer, {
    type: DrawType.POLYLINE,
    drawingCallback: positions => {
      if (positions.length >= 2) {
        analyser.analyse(positions[0], positions[positions.length - 1]);
        drawClear();
      }
    },
  });

  const analyse = () => {
    if (!state.tiped) {
      ElNotification({ message: '点击鼠标左键绘制视线，每两点分析一次，点击右键结束。', duration: 5000 });
      state.tiped = true;
    }
    drawStart();
  };

  const clean = () => {
    drawStop();
    drawClear();
    analyser?.clear();
  };

  onBeforeUnmount(() => {
    clean();
  });
</script>
